<template>
  <div id="app">
  	<h4>水平方向</h4>
    <wii-grid>
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid>
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">3</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid>
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">3</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">4</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid>
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">3</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">4</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">5</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid>
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">3</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">4</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">5</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">6</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>水平方向无边距</h4>
    <wii-grid :gutter="0">
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">3</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">4</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>垂直方向</h4>
    <wii-grid orient="vertical">
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>垂直方向无边距</h4>
    <wii-grid orient="vertical" :gutter="0">
      <wii-grid-item><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>栅格系统</h4>
    <wii-grid>
      <wii-grid-item :span="4"><div class="grid-demo">1/3</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">2/3</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid>
      <wii-grid-item :span="6"><div class="grid-demo">6/12</div></wii-grid-item>
      <wii-grid-item :span="2"><div class="grid-demo">2/12</div></wii-grid-item>
      <wii-grid-item ><div class="grid-demo">rest</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>栅格系统自适应</h4>
    <wii-grid>
      <wii-grid-item :span="1/3"><div class="grid-demo">1/3</div></wii-grid-item>
      <wii-grid-item :span="1/6"><div class="grid-demo">1/6</div></wii-grid-item>
      <wii-grid-item :span="1/8"><div class="grid-demo">1/8</div></wii-grid-item>
      <wii-grid-item :span="1/8"><div class="grid-demo">1/8</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">rest</div></wii-grid-item>
    </wii-grid>
    <br>
    <wii-grid :gutter="0">
      <wii-grid-item :span="1/3"><div class="grid-demo">1/3</div></wii-grid-item>
      <wii-grid-item :span="1/6"><div class="grid-demo">1/6</div></wii-grid-item>
      <wii-grid-item :span="1/8"><div class="grid-demo">1/8</div></wii-grid-item>
      <wii-grid-item :span="1/8"><div class="grid-demo">1/8</div></wii-grid-item>
      <wii-grid-item><div class="grid-demo">rest</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>flex网格</h4>
    <wii-grid :gutter="0">
      <wii-grid-item :span="1/3" :order="4"><div class="grid-demo">1</div></wii-grid-item>
      <wii-grid-item :span="1/6" :order="3"><div class="grid-demo">2</div></wii-grid-item>
      <wii-grid-item :span="1/8" :order="2"><div class="grid-demo">3</div></wii-grid-item>
      <wii-grid-item :span="1/8" :order="1"><div class="grid-demo">4</div></wii-grid-item>
      <wii-grid-item :order="-99"><div class="grid-demo">5</div></wii-grid-item>
    </wii-grid>
    <br>
    <h4>网格适配</h4>
    <wii-grid :gutter="0" wrap="wrap">
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
      <wii-grid-item :span="1/3">
        <img src="http://p.qpic.cn/automall_pic/0/20170612113002_96913/640">
      </wii-grid-item>
    </wii-grid>
  </div>
</template>

<script>
import 'assets/js/wii_entry';

export default {
  data() {
    return {
      show:false
    }
  },
  //相关操作事件
  methods: {
    
  }
}
</script>

<style lang="less">
.grid-demo {
  text-align: center;
  color: #fff;
  background-color: #20b907;
  border-radius: 4px;
  background-clip: padding-box;
}
img{
  max-width: 95%;
  margin: 0 auto;
}
</style>
